<template>
  <div class="container tree-list-layout">
    <treeOffice @click="handleTreeClick" ref="treeOffice"  class="box-left"/>
    <data-view
      ref="dataView"
      propViewKey="sys_office"
      propViewForm="sys/office/detail.vue"
      :propInitData="selectedTreeNode"
      @after-save="handleAfterSave"
      @after-delete="handleAfterDelete"
      @extra-button-click="extraButtonClick"
      :propIsTdesign="true"
      class="box-right"
    />

    <!--数据导入-->
    <customDrawer title="机构数据导入" ref="customDrawerImport" :widthPx="500" :heightPx="500"  hideConfirm >
      <template #content>
        <dataImportArea
          downloadPath="/office/excelDownloadTemp"
          importPath="/office/excelImport"
          :sheetName="'部门'"
          helpMsg="
          1、【下载模板】维护好数据 -> 【选择文件】导入数据<br>
          2、<span class='span-msg-nopad'>目前仅新增机构</span><br>
          3、<span class='span-msg-nopad'>机构编码必须唯一</span><br>
          4、<span class='span-msg-nopad'>机构名称、机构编码必填,上级机构编码为空则为根机构</span><br>
          5、<span class='span-msg-nopad'>根机构为[机构类型]为医院的机构</span>
"
          @success="menuActiveCall"
          ref="dataImportArea"
        />
      </template>
    </customDrawer>
  </div>
</template>

<script>
import treeOffice from '@/components/custom/bus/treeOffice.vue'
import dataImportArea from '@/components/custom/bus/dataImportArea.vue'

export default {
  name: 'office',
  data() {
    return {
      selectedTreeNode: {
        id: '0',
        label: '全部机构',
      },
    }
  },
  created() {
  },
  components: {
    treeOffice, dataImportArea
  },
  watch: {
  },
  methods: {
    // 菜单激活触发
    menuActiveCall() {
      this.$refs.treeOffice.load()
      this.$refs.dataView.fetchData()
    },
    handleTreeClick(data) {
      this.selectedTreeNode = data
      let wrapper = data.id == 0 ? this.$newWrapper() : this.$newWrapper().eq('parent_id', data.id)
      this.$refs.dataView.setQueryWrapper(wrapper)
    },

    handleTreeFilter(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleAfterSave(status, data) {
      this.$refs.treeOffice.load()
    },
    handleAfterDelete() {
      this.$refs.treeOffice.load()
    },
    extraButtonClick({button, data, index}) {
      let buttonKey = button.key
      if (buttonKey === 'sync-dept') {
        this.$ajax.post('his/syncDept').then(response => {
          if (response.code == 0) {
            this.utilMessage.success(`数据同步成功，影响记录数量:${response.msg}`)
            this.$refs.dataView.ocRefresh()
          }
        })
      }
      if (buttonKey === 'importDataCustom') { // 导入数据
        this.$refs.dataImportArea.clear()
        this.$refs.customDrawerImport.show()
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #fff;
  }
  .tree-container {
    padding:10px;
    margin-right:20px;
    border:solid 1px #DCDFE6;
    height:100%
  }
  .tree-filter {
    margin:10px;
    width:80%
  }
</style>
